<template>
  <div>
    <el-card class="!border-none mb-4" shadow="never">
      <el-form class="mb-[-16px]" :model="queryParams" inline>
        <el-form-item label="院区楼栋">
          <el-cascader
              :options="optionsData.building"
              clearable
              v-model="queryParams.building"
              filterable
              :props="props1"
          />
        </el-form-item>
        <el-form-item label="科室代码" prop="department_sn">
          <el-cascader
              :options="optionsData.department"
              clearable
              v-model="queryParams.department"
              filterable
              :props="props1"
          />
        </el-form-item>

        <el-form-item label="记录时间">
          <daterange-picker
              v-model:startTime="queryParams.create_time_start"
              v-model:endTime="queryParams.create_time_end"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
          <el-button type="success" @click="handlePrintRoomStat">打印-汇总</el-button>
          <el-button type="success" @click="handlePrintRoom">打印-详细</el-button>
          <export-data
              class="ml-2.5"
              :button-text="'导出-科室汇总'"
              :fetch-fun="apiRoomDepartmentExportListsRoomStat"
              :params="queryParams"
              :page-size="pager.size"/>
          <export-data
              class="ml-2.5"
              :button-text="'导出-科室详细'"
              :fetch-fun="apiRoomDepartmentExportListsRoom"
              :params="queryParams"
              :page-size="pager.size"/>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none" v-loading="pager.loading" shadow="never">
      <div class="mt-4">
        <el-table id="print" v-loading="pager.loading" :data="pager.lists" @selection-change="handleSelectionChange"
                  ref="table">
          <el-table-column type="selection" width="55"/>
          <el-table-column label="序号" prop="sort" show-overflow-tooltip width="90"/>

          <!--          <el-table-column label="房间名称" prop="name" show-overflow-tooltip/>-->
          <!--          <el-table-column label="院区楼栋" prop="building_text" show-overflow-tooltip/>-->
          <!--          <el-table-column label="科室代码" prop="departmentItem.name" show-overflow-tooltip/>-->

          <el-table-column label="科室信息" prop="rid" width="200">
            <template #default="{ row }">
              {{ row.name }} <br/>
              {{ row.code }} <br/>
              <el-text v-if="row.campus">{{ row.campus.name }}-</el-text>
              <el-text v-if="row.building">-{{ row.building.name }}</el-text>
            </template>
          </el-table-column>

          <el-table-column label="总水用量" prop="room_s_use_total" show-overflow-tooltip/>
          <el-table-column label="均水价" prop="room_s_price" show-overflow-tooltip/>
          <el-table-column label="总水费用" prop="room_s_total_fee" show-overflow-tooltip/>

          <el-table-column label="总电用量" prop="room_d_use_total" show-overflow-tooltip/>
          <el-table-column label="均电价" prop="room_d_price" show-overflow-tooltip/>
          <el-table-column label="总电费用" prop="room_d_total_fee" show-overflow-tooltip/>

          <!--          <el-table-column label="电梯费" prop="lift_fee" show-overflow-tooltip/>-->
          <!--          <el-table-column label="二次加压费" prop="second_pressure_fee" show-overflow-tooltip/>-->

          <el-table-column label="总费用" prop="room_total_fee" show-overflow-tooltip/>
          <el-table-column label="记录时间" prop="log_date" show-overflow-tooltip/>
        </el-table>
      </div>
      <div class="flex mt-4 justify-end">
        <pagination v-model="pager" @change="getLists"/>
      </div>
    </el-card>

    <el-dialog v-model="printVisible" title="打印预览" width="1272px" :before-close="handleClose" top="2vh">
      <div>
        <div id="myTable1Prints" class="single-border">
          <table v-for="(item, index) in pager.lists" :key="index" style="width: 1200px;">
            <tr>
              <td class="print_w1">序号</td>
              <td class="print_w2">科室</td>
              <td class="print_w3">科室代码</td>
              <td class="print_w3">总用电量</td>
              <td class="print_w3">平均电价</td>
              <td class="print_w3">总电费</td>
              <td class="print_w3">总用水量</td>
              <td class="print_w3">平均水价</td>
              <td class="print_w3">总水费</td>
              <td class="print_w3">总费用</td>
            </tr>
            <tr>
              <td class="print_w1">{{ index + 1 }}</td>
              <td class="print_w2">{{ item.name }}</td>
              <td class="print_w3">{{ item.code }}</td>
              <td class="print_w3">{{ item.room_d_use_total }}</td>
              <td class="print_w3">{{ item.room_d_price }}</td>
              <td class="print_w3">{{ item.room_d_total_fee }}</td>
              <td class="print_w3">{{ item.room_s_use_total }}</td>
              <td class="print_w3">{{ item.room_s_price }}</td>
              <td class="print_w3">{{ item.room_s_use_total }}</td>
              <td class="print_w3">{{ item.room_total_fee }}</td>
            </tr>
          </table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" size="small" v-print="printObj"> 确定打印 </el-button>
        </span>
      </template>
    </el-dialog>

    <print-popup v-if="showPrint" ref="printRef" @close="showPrint = false"
                 :print-keyword="printLists.pkl_user_device_keyword"
                 :print-lists="printLists.pkl_user_device_lists"/>

  </div>
</template>

<script lang="ts" setup name="roomDepartmentLists">
import {usePaging} from '@/hooks/usePaging'
import {useDictData, useDictOptions} from '@/hooks/useDictOptions'
import {
  apiRoomDepartmentPrintListsRoom,
  apiRoomDepartmentPrintListsRoomStat,
  apiRoomDepartmentExportListsRoom,
  apiRoomDepartmentExportListsRoomStat,
  buildingAll,
  departmentAll
} from '@/api/room/room_department'
import {logtLists} from '@/api/room/room_department_log'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import {reactive} from "vue";

const printVisible = ref(false)
const printinfo = ref()
const handlePrint = () => {
  printVisible.value = true
}
const handleClose = () => {
  printVisible.value = false
}


import PrintPopup from '@/views/system/print_page.vue'

const printRef = shallowRef<InstanceType<typeof PrintPopup>>()
const showPrint = ref(false)
const printLists = reactive({
  pkl_user_device_keyword: [],
  pkl_user_device_lists: [],
})
const handlePrintRoomStat = async () => {
  const print = await apiRoomDepartmentPrintListsRoomStat(queryParams)
  printLists.pkl_user_device_keyword = print.keyword
  printLists.pkl_user_device_lists = print.lists
  showPrint.value = true
  await nextTick()
  printRef.value?.open()
}
const handlePrintRoom = async () => {
  const print = await apiRoomDepartmentPrintListsRoom(queryParams)
  printLists.pkl_user_device_keyword = print.keyword
  printLists.pkl_user_device_lists = print.lists
  showPrint.value = true
  await nextTick()
  printRef.value?.open()
}

const printObj = ref({
  id: 'myTable1Prints',
  popTitle: '',
  extraCss: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
  previewBeforeOpenCallback() {
    console.log('正在加载预览窗口')
  },
  previewOpenCallback() {
    console.log('已经加载完预览窗口')
  },
  beforeOpenCallback(vue: any) {
    //   vue.printLoading = true
    console.log('打开之前')
  },
  openCallback(vue: any) {
    //   vue.printLoading = false
    console.log('执行了打印')
  },
  closeCallback() {
    console.log('关闭了打印工具')
  },
  clickMounted(vue: any) {
    console.log('点击了打印按钮')
    emits('Closeprint')
    // vue.printSet.popTitle = vue.tableHead // 动态设置页眉
  }
})

const props1 = {
  checkStrictly: true
}
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)
const dialogVisible = ref(true)
const {optionsData} = useDictOptions<{
  building: any[]
  department: any[]
}>({
  building: {
    api: buildingAll
  },
  department: {
    api: departmentAll
  }
})
// 查询条件
const queryParams = reactive({
  building: [],
  department: [],
  create_time_start: '',
  create_time_end: ''
})
// 选中数据
const selectData = ref<any[]>([])
// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
  selectData.value = val.map(({id}) => id)
}
// 获取字典数据
const {dictData} = useDictData('')
// 分页相关
const {pager, getLists, resetParams, resetPage} = usePaging({
  fetchFun: logtLists,
  params: queryParams
})
onActivated(() => {
  getLists()
})
getLists()
</script>

<style scoped>
.print_w1 {
  width: 80px;
}

.print_w2 {
  width: 240px;
}

.print_w3 {
  width: 110px;
}

.single-border table {
  border-collapse: collapse; /*合并边框*/
  width: 100%; /*设置表格宽度*/
  border-top: 1px solid black;
}

.single-border th, .single-border td {
  text-align: center;
  line-height: 30px;
  /*border: 1px solid black; !*设置单线边框*!*/
  /*border-bottom: 1px solid black;*/
  /*border-top: 1px solid black;*/
}
</style>

